/**
  二级导航栏
 */
<template>
  <div class="secondNav">
    <div class="contentNav">
      <router-link to="/">
        <svg-icon name="logo" style="width: 60px; height: 60px;" />
      </router-link>
      <div class="search">
        <div class="searchSelect">
          <Search
            :value="searchVal"
            @command="searchCommand"
          />
        </div>
        <div class="searchRight">
          <input
            type="text"
            v-model="keyword"
            maxlength="20"
            @keyup.enter="searchPro"
            placeholder="请输入搜索商品"
          />
        </div>
        <svg-icon class="searchIcon" name="search" @click="searchPro" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import { useShop } from '@/store/shop'
import Search from './search.vue'
import SvgIcon from '@/components/svgIcon/index.vue'

defineComponent({
  name: 'SecNav'
})
const shopStore = useShop()
const router = useRouter()

const searchVal = shallowRef('宝贝')
const keyword = shallowRef('')

function searchCommand (command) {
  searchVal.value = command
}
function searchPro () {
  if (!keyword.value) {
    return ElMessage.error('请输入搜索内容');
  }
  shopStore.setSearchObj({
    keyword: keyword.value,
    searchVal: searchVal.value
  })
  if (router.currentRoute.value.name !== 'search') {
    router.push({
      path: '/activity/search'
    })
  }
}
</script>

<style lang="scss" scoped>
.secondNav{
  width: 100%;
  .contentNav{
    max-width: 1250px;
    height: 80px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search{
      width: 394px;
      height: 39px;
      border: 2px solid #F3F4F5;
      display: flex;
      .searchSelect{
        $height: 30px;
        width: 82px;
        height: $height;
        margin-top: 2px;
        border-right: 1px solid #CCCCCC;
        text-align: center;
        line-height: $height;
        .el-dropdown{
          height: $height;
          line-height: $height;
          color: #C5AA7B;
        }
      }
      .searchRight{
        flex: 1;
        input{
          padding-left: 15px;
          font-size: 14px;
          color: #333;
          line-height: 35px;
        }
      }
      .searchIcon{
        cursor: pointer;
        width: 30px;
        height: 30px;
        margin: 2px 5px;
      }
    }
  }
}
</style>
